<template>
    <div class="customChart">
        <div class="chartTile">
            学历人数同比去年统计
        </div>
        <div class="title_box">
            <div v-for="(item, index) in educatList" :key="index" class="title_item">
                <div class="title_t">
                    <span class="title_name">{{ item.name }}</span>
                    <component :is="item.fluctuate == 1 ? 'UpOutlined' : 'DownOutlined'"
                        :style="{ color: item.fluctuate == 1 ? '#52c41a' : '#f5222d' }" class="icon" />
                </div>
                <div class="title_num">
                    <div class="title_percent">
                        {{ item.increment }}
                    </div>
                    <div>{{ item.num }}</div>
                </div>
            </div>
        </div>

        <div class="chartTile">
            证书同比去年统计
        </div>
        <div class="title_box">
            <div v-for="(item, index) in zstbqntjData" :key="index" class="title_item">
                <div class="title_t">
                    <span class="title_name">{{ item.name }}</span>
                    <component :is="item.fluctuate == 1 ? 'UpOutlined' : 'DownOutlined'"
                        :style="{ color: item.fluctuate == 1 ? '#52c41a' : '#f5222d' }" class="icon" />
                </div>
                <div class="title_num">
                    <div class="title_percent">
                        {{ item.increment }}
                    </div>
                    <div>{{ item.num }}</div>
                </div>
            </div>
        </div>

        <div class="chartTile">
            职称同比去年统计
        </div>
        <div class="title_box">
            <div v-for="(item, index) in zctbqntjjData" :key="index" class="title_item">
                <div class="title_t">
                    <span class="title_name">{{ item.name }}</span>
                    <component :is="item.fluctuate == 1 ? 'UpOutlined' : 'DownOutlined'"
                        :style="{ color: item.fluctuate == 1 ? '#52c41a' : '#f5222d' }" class="icon" />
                </div>
                <div class="title_num">
                    <div class="title_percent">
                        {{ item.increment }}
                    </div>
                    <div>{{ item.num }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import rxAjax from '@/assets/js/ajax.js';
import useMain from "../../../../stores/use-main";
import { mapState } from 'pinia';
// 系统自定义业务管理列表 api接口
export const FormBoListApi = {};
FormBoListApi.executeInterfaceApi = function (appId, apiKey, params) {
    var url = "/api-system/system/core/sysInterfaceApi/executeApi?appId=" + appId + "&apiKey=" + apiKey;
    return rxAjax.postJson(url, params)
}

export default {
    computed: {
        ...mapState(useMain, ['appId'])
    },
    // 数据定义
    data() {
        return {
            educatList: [], // 用于存储接口返回的数据
            zstbqntjData: [],
            zctbqntjjData: []
        };
    },
    // 初始化时加载
    created() {
        this.getInfo();
    },
    // 页面自定义函数
    methods: {
        // 封装通用方法
        async fetchData(apiKey, params) {
            try {
                const response = await FormBoListApi.executeInterfaceApi(this.appId, apiKey, params);
                return response.data.data;
            } catch (error) {
                console.error(`接口 ${apiKey} 调用失败:`, error);
                return null;
            }
        },

        async getInfo() {
            console.log(this.appId)
            const params = {
                year: new Date().getFullYear() // 获取当前年份
            };

            // 调用三个接口
            this.educatList = await this.fetchData('xltbtj', { "bodys": { "params": params } })
            this.zstbqntjData = await this.fetchData('zstbtj', { "bodys": { "params": params } })
            this.zctbqntjjData = await this.fetchData('zctbtj', { "bodys": { "params": params } })

            // console.log('学历统计数据:', this.educatList);
            // console.log('证书:', this.zstbqntjData);
            // console.log('职称:', this.zctbqntjjData);
        }
    },
    // 页面自定义观察函数
    watch: {}
};
</script>

<style scoped lang="less">
/* Your CSS styles go here */
@white-color: white;
// 定义 CSS 变量
@primary-color: #67a4d3;
@secondary-color: #43cafe;
@highlight-color: #29e6ea;
@font-family: "微软雅黑Regular", sans-serif;
@font-family-bold: "微软雅黑Bold", sans-serif;

.chartTile {
    color: @white-color;
    font-size: 16px;
    font-weight: 400;
    margin: 10px 0px;
}

.title_box {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    /* Adjust the gap between items */
}

.title_item {
    flex: 1 1 calc(25% - 16px);
    /* Adjust the width of each item */
    padding: 5px;
    border: 1px solid @primary-color;
    border-radius: 8px;
    // background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.title_item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.title_t {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.title_name {
    font-size: 16px;
    font-weight: 500;
    color: @white-color;
}

.title_percent {
    font-size: 16px;
    font-weight: 400;
    color: @white-color;
}

// .icon {
//     margin-left: 8px;
// }

.title_num {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
    font-weight: 600;
    color: #1890ff;
    // text-align: center;
}
</style>